{extend name="other/public"}
{block name='css'}
 <style>
   .c1 input{width: 380px;}
   .c2 {padding: 20px;display: none;}
 </style>
{/block}

{block name='content'}
<div class="layui-fluid" id="app" v-cloak>
  <div class="layui-card">
    <div class="layui-card-header">分类管理</div>
    <div class="layui-card-header layuiadmin-card-header-auto u-flex c1">
      <div class="u-flex">
        <input type="text" class="layui-input" v-model="typeName" placeholder="输入需要添加的分类">
        <button class="layui-btn layuiadmin-btn-tags" @click="addType">添加</button>
      </div>
    </div>
    <div class="layui-card-body">    
      <table class="layui-table">
        <colgroup>
          <col width="100">
          <col>
          <col width="200">
        </colgroup>
        <thead>
          <tr>
            <th>id</th>
            <th>分类名</th>
            <th>操作</th>
          </tr> 
        </thead>
        <tbody>
          <tr v-for="(v,index) in listData" :key="index">
            <td>{{v.id}}</td>
            <td>{{v.name}}</td>
            <td>
              <a class="layui-btn layui-btn-normal layui-btn-xs" @click="openEdit(v)"><i class="layui-icon layui-icon-edit"></i>编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" @click="delData(v.id,index)"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="edit c2">
    <div class="c3 u-flex">
      <input type="text" class="layui-input" v-model="edit.typeName">
      <button class="layui-btn layuiadmin-btn-tags" @click="editData">确认修改</button>
    </div>
  </div>
</div>

{/block}

{block name='js'}
<script>
  const listData = {$listData|raw};
  const anVue = new Vue({
    el:"#app",
    data:{
      listData:listData,
      typeName:'',
      edit:{
        id:'',
        typeName:'',
        is_edit:false
      }
    },
    methods: {
      addType(){
        if(this.typeName==''){
          layer.msg('请输入需要添加的分类名称')
          return false;
        }
        $.post("{:url('type_add_data')}",{name:this.typeName,type:1},(res)=>{
            if(res.code==1){
              layer.msg('操作成功',{time:1000},function(){
                location.reload()
              })
            }else{
              layer.msg(res.msg)
            }
        },'json')
      },
      delData(id,index){
        let _this = this;
        layer.msg('删除后将不能恢复', {
          time: 0 //不自动关闭
          ,btn: ['直接删除', '取消']
          ,yes: function(index){
            layer.close(index);
            $.post("{:url('type_del_data')}",{id},(res)=>{
                if(res.code==1){
                  layer.msg('操作成功',{time:1000},function(){
                    location.reload()
                  })
                }else{
                  layer.msg(res.msg)
                }
            },'json')
          }
        });
      },
      openEdit(v){
        this.edit.is_edit = true
        this.edit.id = v.id
        this.edit.typeName = v.name
        layer.open({
          type: 1,
          title: false,
          closeBtn: 0,
          shadeClose: true,
          skin: 'yourclass',
          content: $(".edit")
        });
      },
      editData(id,index){
        let _this = this;
        $.post("{:url('type_edit_data')}",{id:_this.edit.id,name:_this.edit.typeName},(res)=>{
            if(res.code==1){
              layer.msg('操作成功',{time:1000},function(){
                location.reload()
              })
            }else{
              layer.msg(res.msg)
            }
        },'json')
      },
    },
  })
  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index'], function(){
    var $ = layui.$
  });
  </script>
{/block}